<template>
  <div class="app-container">
    <div class="class-top">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
    <el-form-item label="教师：" prop="teacher">
            <el-input v-model="queryParams.teacher"  size="mini" :disabled="true"/>
      </el-form-item>
      <el-form-item label="工号：" prop="teachercard">
            <el-input v-model="queryParams.teachercard"  size="mini" :disabled="true"/>
      </el-form-item>
      <el-form-item label="班级：" prop="classs" >
        <el-select v-model="queryParams.classs" placeholder="选择班级" clearable size="mini" :disabled="true">
          <el-option
            v-for="item in classList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      
    </el-form>
    <div class="class-btn">
      <el-button type="primary" plain size="mini" @click="getCreateQrCode" v-if="!data">生成二维码</el-button>
    </div>
    </div>
    <hr>

    <div class="class-main" v-if="data">
        <el-row>
          <el-col :span="14">
            <div class="class-main-img">
                <img  :src="previewUrl" alt="扫码打卡" width="100%" height="400px">
                <span>扫码进行考勤签到</span>
            </div>
            
          </el-col>
          <el-col :span="10">
            <div class="class-main-user">
                
                <span>人员列表</span>
            </div>
          </el-col>
        </el-row>
    </div>
  </div>
</template>

<script>
import { createQrcode,getInfos} from "@/api/classroommanagement/startCall";
export default {

    data(){
        return{
          classList:[
            {
              value:103,
              label:"软件1701"
            }
          ],
          data:{},
          previewUrl:null,
          showSearch:true,
           // 查询参数
          queryParams: {
            classs: "103",
            teacher:'张三',
            teachercard:'1222111111'
          },
        }
    },
    created(){
      //console.log(this.$store.state.user)
      this.getInfos()
    },
    methods:{
      getInfos(){
        getInfos(this.queryParams).then(res => {
          if(res.data){
              this.previewUrl = "data:image/jpeg;base64," + res.data.qrimg;
              this.data=res.data
          }else{
            this.data=null
          }
         
        });
      },
      /** 查询菜单列表 */
      getCreateQrCode() {
        createQrcode(this.queryParams).then(res => {
          this.getInfos()
        });
      },
    }
}
</script>

<style scoped>
.class-top{
  width: 60%;
  height: 100px;

  margin: 0 auto;
}
.class-btn{
  width: 12%;
  margin: 0 auto;
}
.class-main-img{
  width: 60%;
  height: 400px;
  margin: 0 auto;
  margin-top: 5px;
  text-align: center;
  
}

.class-main-user{
  height: 400px;
  margin: 0 auto;
  margin-top: 5px;
  text-align: center;
  border: 1px darkgray solid;
}
</style>